<template>
	<view class="alarmUrgent">
		<model-page>
			<Card>
				<view class="title">
					基础信息
				</view>
				<view class="infoList">
					<view class="info_row" v-for="(item,index) in infoList" :key="index">
						<text>{{item.title}}</text>
						<text>{{olderInfo[item.props]}}</text>
					</view>
				</view>
			</Card>
			<view class="ways">
			  <Card>
				  <view class="way_title">
				  	菜品明细
				  </view>
				  <view class="alarmWays" v-for="(item,index) in memuList" :key="index">
					  <image :src="item.photoUrl" mode="" class="mealImg"></image>
					<view class="mealInfo">
						<view class="mealInfo_title">
							{{item.packageName}}
						</view>
						<view class="mealInfo_detail">
							<view>
								明细：{{item.includeDishes}}
							</view>
						</view>
					</view>
					<view class="num">
						x{{item.meunNum}}
					</view>
				  </view>
			  </Card>
			</view>
			<Card>
			<view class="deal_result">
				订单备注
			</view>	
			<view class="remarkOverview" >
				{{menuInfoObj.remark}}
			</view>
			</Card>
			<view style="height: 25rpx;">
				
			</view>
			<Card v-if="recordStatusType !== '2'">
				<view class="deal_result">
					取餐备注
				</view>
				<textarea v-model="postData.takeFoodRemark"  placeholder="请输入处理结果" v-if="recordStatusType === '3'" :maxlength="200"/>
				<view class="remarkOverview" v-else>
					{{menuInfoObj.takeFoodRemark}}
				</view>
			</Card>
			<view class="btn_group" v-if="recordStatusType === '3'">
				<view @click="processFlow">
					确认提交
				</view>
			</view>
		</model-page>
	</view>
</template>

<script setup>
	import {reactive, ref} from 'vue'
	import {takeFoodDetail,takeFood} from '@/api/order.js'
	import {getElderInfo} from '@/api/index.js'
	import {onLoad} from '@dcloudio/uni-app'
	const recordStatusType = ref()
	onLoad((option)=>{

		const {detailId,recordStatus,elderId} = option
		recordStatusType.value = recordStatus
		console.log("fdasfdsa",recordStatus);
		uni.setNavigationBarTitle({
		      title: recordStatus == 2 ? '待出餐' : recordStatus == 3 ? '待取餐' : '' // 设置标题
		    });
		getFoodMeunDetail(detailId)
		getolderInfo(elderId)
	})
	const infoList = [
		{
			title:"姓名",
			props:"elderName"
		},
		{
			title:"房间",
			props:"buildRoomNum"
		},
		{
			title:"性别",
			props:"gender"
		},
		{
			title:"年龄",
			props:"age"
		},
	]
	// 获取老人信息
	const olderInfo = ref({})
	const getolderInfo = async(elderId)=>{
		try{
		const {code,data:res} = await getElderInfo({elderId})
		if(code === 200){
			olderInfo.value = res
			
		}
		}catch(e){
			//TODO handle the exception
		}
	}
	// 获取菜品明细
	const memuList = ref([])
	const orderDetailId = ref()
	const menuInfoObj = ref()
	// const remark = ref("")
	const getFoodMeunDetail = async(orderId)=>{
	const {code,data:res} =	await takeFoodDetail({orderId})
	if(code === 200){
		memuList.value = res.mealPackageInfoAndNumList.map(val=>{
			return Object.assign(val.mealPackageInfo,{meunNum:val.num})
		})
		orderDetailId.value = res.id
		// remark.value = res.remark
		menuInfoObj.value = res
	}
	}
	const postData = reactive({
		orderId:"",
		takeFoodRemark:"" //取消备注
	})
	// 提交订单
	const processFlow = async()=>{
		postData.orderId = orderDetailId.value
		try{
		const {code,data:res}=  await takeFood(postData)
		if(code === 200){
			uni.showToast({
			 icon:'success',
			 title:"提交成功!",
			 duration:1000,
			 complete() {
			 	setTimeout(()=>{
					uni.navigateBack()
				},1000)
			 }
			})
		}	
		}catch(e){
			//TODO handle the exception
			return Promise.reject(e)
		}

	}
	
</script>

<style lang="less">
.alarmUrgent{
	background-color: #f8faff;
	.title{
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		border-bottom:1rpx solid #e5e5e5;
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
	}
	.infoList{
		padding-bottom: 24rpx;
		.info_row{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15rpx;
			&:last-child{
				margin-bottom: 0;
			}
			>text{
				&:first-child{
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}
				&:last-child{
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
		
	}
	.cutin{
		width: 136rpx;
		height: 40rpx;
	}
	.noticeItem{
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 40rpx;
	}
	.ways{
		margin: 45rpx 0;
	.way_title{
		margin: 26rpx 0;
		font-size: 32rpx;
		color: #999999;
		padding-bottom: 24rpx;
		border-bottom:1rpx solid #e5e5e5;
	}
		
	.alarmWays{
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		display: flex;
		>image{
			height: 144rpx;
			border-radius: 8rpx;
			width: 118rpx;
		}
		.mealInfo{
			flex-grow: 1;
			margin-left: 24rpx;
			.mealInfo_title{
				font-weight: 500;
				font-size: 28rpx;
				color: #3B3B3B;
				line-height: 38rpx;
			}
			.mealInfo_detail{
				display: flex;
				margin-top: 5rpx;
				width: 100%;
				view{
					font-weight: 500;
					font-size: 22rpx;
					color: #B3B3B3;
					line-height: 32rpx;
				}
			}
		}
	}
	
	}
		
	.toCurrent{
		margin: 30rpx 0;
		font-size: 32rpx;
	}
.deal_result{
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	padding-bottom: 24rpx;
	border-bottom: 1rpx solid #e5e5e5;
	margin-bottom: 20rpx;
	text{
		color: #B3B3B3;
		margin-left: 5rpx;
	}
}
.btn_group{
	display: flex;
	margin: 60rpx 0;
	>view{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		border-radius: 40rpx;
		flex: 1;
		&:first-child{
			font-weight: 500;
			font-size: 32rpx;
			color: #666666;
			background: #F2F8FF;
			margin-right: 30rpx;
		}
		&:last-child{
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			background: linear-gradient( 180deg, #74B7FF 0%, #1680F3 100%);
		}
	}
}
}
.preview{
	 width: 100%;
	 height: 100%;
	 padding: 20rpx;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
 >image{
		 width: 170rpx;
		 height: 116rpx;

 }	
 .remark{
	 margin: 20rpx;
	 width: 100%;
	
 }
 .remark_title{
	 margin-bottom: 10rpx;
 }
 .remark_btn{
	 width: 100%;
	 height: 80rpx;
	 background: linear-gradient( 180deg, #74B7FF 0%, #1680F3 100%);
	 border-radius: 40rpx;
	 font-weight: 500;
	 font-size: 32rpx;
	 color: #FFFFFF;
	 text-align: center;
	 line-height: 80rpx;
	 margin-top: 45rpx;
 }
 .cancelSuccess{
 	font-weight: 600;
 font-size: 32rpx;
 color: #333333;
 line-height: 88rpx;
 }
}
:deep(.uni-popup__wrapper){
	height: 800rpx;
	width: 90%;
	border-radius: 20rpx;
	overflow: hidden;
}
.disable {
	background-color: ;
}
.remarkOverview{
	min-height: 150rpx;
}
</style>
